<!-- 黄金页购买 -->
<template>
	<view id="buy">
		<view class="title">
			<view class="left">买入金额</view>
			<view class="right">交易规则</view>
		</view>
		<view class="buymoney">
			<text class="y">￥</text>
			<view class="npt">
				<u-input placeholder='1000.00元起购' maxlength='10' v-model="value" :clearable='false' :border="border" />
			</view>
			<u-icon @click="clear" class="x" color='#C6CAD1' size="32rpx" name="close"></u-icon>
		</view>
		<view style="margin-top: 30rpx;">
			<u-line color="#C6CAD1" />
		</view>
		<view class="text">
			买入0费率，预计03月29日(星期- -)确认买入交易， 确认金价为03月26日(星期五)的民生存积金金价(卖出手续费详见
			交易规则)
		</view>
		<view class="text2">
			<view class="t1">付款方式</view>
			<view class="t2">
				<text>我的钱包</text>
				<br />
				<span>其他付款方式</span>
				<u-icon color="#C6CAD1" size="28rpx" name="arrow-right"></u-icon>
			</view>
		</view>

		<view class="text3">
			点击确定即代表您知悉该基金的<text>产品概要</text>和投资人权益须知等相关内容
		</view>
		<view @click='open()' class="btn">
			确定
		</view>

		<view>
			<u-popup negative-top="500" border-radius="12" mode="center" v-model="show" :closeable="true"
				close-icon-size="16" close-icon-pos="top-left">
				<view class="money_box">
					<text class="mey_nav">请输入支付密码</text>
					<u-message-input class="inpts" mode="box" :breathe="true" :focus="true" width="56" :maxlength="6"
						font-size="24" bold="false"></u-message-input>
					<text class="mey_btm">忘记密码？</text>
				</view>
			</u-popup>
		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				value: '',
				border: false,
				show: false
			}
		},
		methods: {
			clear() {
				this.value = ''
			},
			open() {
				this.show = true;

			},
			close() {
				this.show = false
			},
			finish(e) {
				console.log(e);
			}
		}
	}
</script>

<style scoped lang="scss">
	#buy {
		padding: 54rpx;

		.title {
			display: flex;
			justify-content: space-between;

			// flex-shrink:0 ;
			.left {
				font-weight: 700;
				height: 50rpx;
				line-height: 50rpx;
				font-size: 32rpx;
				font-weight: normal;
				font-stretch: normal;
				letter-spacing: 0rpx;
				color: #2a2d32;
			}

			.right {
				height: 50rpx;
				line-height: 50rpx;
				font-size: 24rpx;
				font-weight: normal;
				font-stretch: normal;
				letter-spacing: 0rpx;
				color: rgba(58, 106, 246, 0.5);
			}
		}

		.buymoney {
			position: relative;
			margin-top: 40rpx;
			height: 60rpx;

			.npt {
				margin: 0 auto;
				width: 570rpx;
				height: 40rpx;

			}

			.y {
				font-size: 32rpx;
				font-weight: 700;
				position: absolute;
				left: -10rpx;
				top: 12rpx;
			}

			.x {
				position: absolute;
				right: 0;
				top: 22rpx;
			}
		}

		.text {
			margin-top: 20rpx;
			font-size: 24rpx;
			line-height: 34rpx;
			letter-spacing: 0rpx;
			color: #6c6e72;
		}

		.text2 {
			margin-top: 54rpx;
			display: flex;
			justify-content: space-between;

			.t1 {
				margin-top: 20rpx;
				font-size: 28rpx;
				font-weight: normal;
				font-stretch: normal;
				line-height: 40rpx;
				letter-spacing: 0rpx;
				color: #2e3033;
			}

			.t2 {
				margin-right: 50rpx;
				position: relative;

				u-icon {
					top: 20rpx;
					right: -50rpx;
					position: absolute;
				}

				text {
					font-family: PingFang SC;
					font-size: 24rpx;
					font-weight: normal;
					font-stretch: normal;
					line-height: 34rpx;
					letter-spacing: 0rpx;
					color: #4d4d4d;
				}

				span {
					font-family: PingFang SC;
					font-size: 20rpx;
					font-weight: normal;
					font-stretch: normal;
					line-height: 28rpx;
					letter-spacing: 0rpx;
					color: #b4b4b4;
				}
			}
		}

		.text3 {
			margin-top: 50rpx;
			font-size: 24rpx;
			color: #bcc3cd;

			text {
				color: #f1a721;
			}
		}

		.btn {
			margin-top: 50rpx;
			width: 624rpx;
			height: 98rpx;
			background-color: #f1a721;
			border-radius: 12rpx;
			opacity: 0.6;
			text-align: center;
			line-height: 98rpx;
			font-size: 40rpx;


			letter-spacing: 0rpx;
			color: #ffffff;
		}
	}



	.money_box {
		text-align: center;
		padding: 80rpx 40rpx;

		.mey_nav {
			display: block;
			font-size: 32rpx;
			font-family: PingFang SC;
			font-weight: bold;
			color: #2A2D32;
			margin-bottom: 40rpx;
		}

		.mey_btm {
			display: block;
			font-size: 24rpx;
			font-family: PingFang SC;
			font-weight: 400;
			color: #CBCBCB;
			margin-top: 20rpx;
		}

	}
</style>
